<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import useSettingsStore from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import useAppStore from '@/store/modules/app';

const appStore = useAppStore();

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
  });
});
</script>
<style>

.dis_f {
  display: flex;
}

.dis_f_l_c {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.dis_f_l {
  display: flex;
  justify-content: flex-start;
}

.dis_f_l_b {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.dis_f_c_b {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.dis_f_c_c {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dis_f_r_c {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dis_f_sb {
  display: flex;
  justify-content: space-between;
}

.dis_f_sb_b {
  display: flex;
  justify-content: space-between;
  ms: flex-end;
}

.dis_f_sb_c {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dis_f_sa_c {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dis_f_w_l{
  display: flex;
  flex-flow: row wrap; /* 设置主轴为水平和允许换行 */
  justify-content: flex-start;
  align-items: stretch;

}
.dis_f_w {
  display: flex;
  flex-wrap: wrap;
}

.dis_f_w_l_c {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.dis_f_w_sb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dis_f_w_sb_c {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.dis_f_w_c_c {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.dis_f_co {
  display: flex;
  flex-direction: column;
}
.dis_f_co_c {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dis_f_co_c_c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dis_f_co_l_c {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dis_f_co_r_c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}


.dis_f_co_sb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dis_f_co_sb_c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

</style>
